<template>
  <div>
    <Header />
    <PageHeader title="QA Center" />
    <div style=" padding: 30px 200px;">
      <div>
        <el-card >
          <div style="display:flex;justify-content: space-between;">
          
            <h1 style="cursor:default" @click="back()"><i class="el-icon-arrow-left" v-if="title=='我的提问'"></i>{{title}}</h1>
            <div style="padding:20px 0">
              <el-input v-model="queryParams.keyword" prefix-icon="el-icon-search" placeholder="请输入关键词搜索" style="width:180px"
                 @keydown.enter.native="getList" clearable @clear="clear"></el-input>
            </div>
            
          </div>
        </el-card>
      </div>
      <div style="display:flex;margin-top:30px">
      
       <el-card shadow="always" style="flex: 1 1 0%; padding: 20px;">
        <el-tabs v-model="activeName" @tab-click="handleClick" v-if="title=='问答中心'">
          <el-tab-pane label="最新问答" name="1"></el-tab-pane>
          <el-tab-pane label="最热问答" name="2"></el-tab-pane>
        </el-tabs>
        <div  class="tag-box">
          <div :class="[tags.indexOf(item.dictLabel)>-1?'tag_checked':'tag']" v-for="(item,index) in tagOptions" :key="index" @click="checkTag(item)">
            {{item.dictLabel}}
          </div>
          
        </div>
        <div style="flex-grow: 1;">
          <div style="position: relative;" v-loading="loading">
            <div class="quList" v-for="(item,index) in questionList" :key="index" @click="view(item.id)">
              <h2 class="qu-title">
                  {{item.title}}
              </h2>
              <div class="qu-content">
                {{item.contentText}}
              </div>
              <div class="tag-list">
                <div class="qu-tag" v-for="(ele,eleIndex) in item.tags.split(',')" :key="eleIndex">{{ele}}</div>
              </div>
              <div style="display:flex" class="qu-author">
                <span><i class="el-icon-user" style="margin-right:3px"></i>{{item.createBy}}</span>
                <span><i class="el-icon-time" style="margin-right:3px"></i>{{item.createTime}}</span>
                <span><i class="el-icon-view" style="margin-right:3px"></i>{{item.viewCount}}</span>
              </div>
            </div>

          </div>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
       </el-card>
       <el-card style="height:175px;margin-left:50px;width:240px" v-show="title=='问答中心'">
        <div class="myqu-header">
          <h2 class="myqu">我的提问</h2>
          <div class="my-ask" @click="ask()">我要提问</div>
        </div>
        <div style="margin-top:30px">
          <div class="my_question_btn" @click="myAsk()">
            查看我的提问
          </div>
        </div>
       </el-card>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>

import '../../assets/styles/cms/cmsstyle.scss'

import Header from "@/views/cms/components/Header";
import PageHeader from "@/views/cms/components/PageHeader";
import Footer from "@/views/cms/components/Footer";
import { getQuestionList,viewCountIncrease } from "@/api/tool/datav/question";
export default {
  components: {
    Header,
    PageHeader,
    Footer,
  },
  head() {
    return {
      title: "Dimon | Blog",
    };
  },
  created() {
    this.getDicts("cms_question_tag").then(response => {
      this.tagOptions = response.data;
    });
    if(this.$route.params.keyword != undefined){
      this.queryParams.keyword = this.$route.params.keyword
    }
    this.getList();
  },
  data() {
    return {
      activeName:"1",
      tagOptions:[],//标签字典
      tags:[],//选中标签
      questionList:[],//问题列表
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword:"",
        createBy:"",
        orderType:"0"
      },
      loading:false,
      title:"问答中心"
    }
  },
  methods: {
    handleClick(tab, event) {
      //最新
      if(tab.index == 0){
        this.queryParams.orderType = "0"
      }
      //最热
      else if(tab.index == 1){
        this.queryParams.orderType = "1"
      }
      this.queryParams.pageNum =  1;
      this.queryParams.pageSize =  10;
      this.getList();
    },
    checkTag(item){
      let tagIndex = this.tags.indexOf(item.dictLabel)
      
      if(tagIndex > -1){
        this.tags.splice(tagIndex,1)
      }else{
        this.tags.push(item.dictLabel)
      }
      this.queryParams.pageNum =  1;
      this.queryParams.pageSize =  10;
      this.getList();
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        keyword:"",
        createBy:"",
        orderType:"0" //排序方式
      };
      this.tags = []
    },
    getList() {
      this.loading = true;
      this.queryParams.tags = this.tags.join(",");

      getQuestionList(this.queryParams).then(response => {
        if (response.code == 200) {
          this.questionList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      });    
    },
    //提问页
    ask(){
      window.open('/cms/question/ask','_self')
    },
    myAsk(){
      this.title = "我的提问"
      this.reset();
      this.queryParams.createBy = this.$store.getters.name;
      this.getList();
    },
    back(){
      if(this.title == "我的提问"){
        this.title = "问答中心"
        this.reset();
        this.getList();
      }
    },
    //查看详情
    view(id){
      let data = {id:Number(id)}
      viewCountIncrease(data).then(response =>{
        if(response.code == 200){
          this.$router.push({path: '/cms/question/details', query: {id: Number(id)}});
        }
      })
    },
    //清空搜索
    clear(){
      this.reset();
      if(this.title == "我的提问"){
        this.queryParams.createBy = this.$store.getters.name;
      }
      this.getList();
    }
  },
};
</script>

<style scoped>
::v-deep .tag-box .el-tag--plain.el-tag--info {
  
  background-color: #fff;
  border-color: #d3d4d6;
  color: #909399;
  font-size: 14px;
}
.tag {
    font-size: 14px;
    line-height: 20px;
    color: #7a838d;
    border: 1px solid rgba(100,107,116,.32);
    border-radius: 3px;
    padding: 6px 9.5px;
    display: inline-block;
    font-weight: 400;
    margin-right: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.tag_checked, .tag:hover {
    font-size: 14px;
    line-height: 20px;
    color: #7a838d;
    border: 1px solid rgba(100,107,116,.32);
    border-radius: 3px;
    padding: 6px 9.5px;
    display: inline-block;
    font-weight: 400;
    margin-right: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #007afc;
    border-color: #007afc;
}
.quList{
  padding: 24px 0;
  cursor: pointer;
  border-bottom: 1px solid #dbdfe5;
}
.quList .qu-title{
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #262c33;
  margin-bottom: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: color .3s;
}
.quList .qu-content{
  font-size: 14px;
  line-height: 20px;
  height: 20px;
  color: #646b74;
  margin-bottom: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.quList .tag-list{
  margin-bottom: 24px;
}
.qu-tag{
  color: #999;
  border: 1px solid rgba(100,107,116,.32);
  cursor: default;
  font-size: 12px;
  line-height: 17px;
  border-radius: 3px;
  padding: 6px 9.5px;
  display: inline-block;
  font-weight: 400;
  margin-right: 8px;
  margin-bottom: 8px;
  user-select: none;
}
.qu-author span{    
  margin-right: 25px;
  font-size: 14px;
  line-height: 20px;
  color: #888;
}
.myqu-header{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
}
.myqu-header .myqu{
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: #262c33;
}
.myqu-header .myqu:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 18px;
  margin-right: 8px;
  background-color: #007afc;
  border-radius: 10px;
  position: relative;
  top: 3px;
}
.myqu-header .my-ask{
  width: 84px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: #007afc;
  color: #fff;
  cursor: pointer;
}
.my_question_btn{
  background: linear-gradient(0deg,#f8faff,#f8faff),#e8ecf4;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: #007afc;
  cursor: pointer;
  padding: 17px 0;
}
</style>
